
<template>
    <ForOneHeader :from_url="from_url" :autoBack="showHomeBtn == '1'" />
    <view class="black">

       

        <video :src="video?.video_url" :autoplay="video?.auto_play" object-fit="fill" 
        :enable-auto-rotation="true"
        class="videownd"
        :title="video?.video_title"></video>
        <up-gap></up-gap>
        <view class="title">{{ video?.video_title }}</view>
        <view class="button" >
            <u-button text="分享" icon="share"
            color="#ed680e" 
            @click="onShareAppMessage"
            openType="share"
            :plain="false" shape="circle" iconColor="#fff"></u-button>
        </view>
        <!-- color="linear-gradient(to right, #ed680e, #d91e5f)"  -->
    </view>
    
</template>

<script setup lang="ts">

import { defineProps,ref } from 'vue'
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import {getVideoById} from '@/api/video'
import { shareUtils } from '@/utils/share'

const page = getCurrentPages().pop()
const video = ref()
const props = defineProps({
    id:{
        type:Number,
        default:0
    },
    from_url:{
        type:String,
        default:''
    },
    showHomeBtn:{
        type:Number,
        default:0
    }
})

let path: string = shareUtils.buildPathQuery(`/${page?.route}?id=${props.id}&from_url=${props.from_url}`)
onShareTimeline(() => {
  return {
    title: video.value.video_title,
    imageUrl: video.value.video_cover,
    path
  }
})
onShareAppMessage(() => {
  debugger
  return {
    title: video.value.video_title,
    imageUrl: video.value.video_cover,
    path
  }
})



getVideoById(props.id).then(res=>{

    video.value = res
})


</script>

<style lang="scss" scoped>
.black{
    background-color: #000;
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    justify-content: center;
    align-items: center;
    .video-container{

    }
    .title{
        color: #fff;
        text-align: left;
        display: inline-block;
        width: 100%;
        padding-left: 50rpx;
    }
}
.videownd{
    width: 100%;
}
.button{
    padding-top: 50rpx;
    width: 200rpx;
}
</style>